<template>
  <div class="module-view">
    <div class="left">
      <el-card shadow="hover" :body-style="{ padding: '0 0 20px 0' }">
        <template>
          <div class="module-view-rank-wrapper">
            <!-- 左边图表 -->
            <div
              class="com-chart"
              ref="annual_seles_ref"
              :style="{ width: '100%', height: '100%' }"
            ></div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="right">
      <el-card shadow="hover" :body-style="{ padding: '0 0 20px 0' }">
        <template>
          <div class="module-view-rank-wrapper">
            <div
              class="com-chart"
              ref="rank_bar"
              :style="{ width: '100%', height: '100%' }"
            ></div>
            <!-- <div class="module-view-list">
              <div class="module-view-title">
                {{ $t("dashboard.moduleClicksLeaderboard") }}
              </div>
              <div class="list-item-wrapper">
                <div class="list-item" v-for="item in rankData" :key="item.no">
                  <div class="list-info">
                    <div
                      :class="['list-item-no', +item.no <= 3 ? 'top-no' : '']"
                    >
                      {{ item.no }}
                    </div>
                    <div class="list-item-name">{{ item.name }}</div>
                  </div>
                  <div class="list-item-num">{{ item.num }}次</div>
                </div>
              </div>
            </div> -->
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
import homeview from "@/api/homeview";
export default {
  name: "index",
  data() {
    return {
      chartInstance: null,
      chartInstance1: null,
      rankData: [],
      year: "", //当前年
      xData: [], //x轴数据
      yData: [], //y轴数据
    };
  },
  mounted() {
    this.getNowDate();
    this.initChart();
    this.initChart1();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //获取当前时间
    getNowDate() {
      var date = new Date();
      var year = date.getFullYear(); // 年
      this.year = year;
      // console.log(this.yearmonth)
    },
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.annual_seles_ref);
      const initOption = {
        title: {
          text: this.$t("middle.title"),
          textStyle: {
            fontSize: 15,
            color: "#666",
          },
          left: 25,
          top: 20,
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: "#999",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
          axisLabel: {
            color: "#333",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dotted",
              color: "#eee",
            },
          },
        },
        color: ["#3398DB"],
        grid: {
          top: 70,
          left: 60,
          right: 60,
          bottom: 50,
        },
      };
      this.chartInstance.setOption(initOption);
    },
    initChart1() {
      this.chartInstance1 = this.$echarts.init(this.$refs.rank_bar);
      const initOption = {
        title: {
          text: this.$t("dashboard.moduleClicksLeaderboard"),
          textStyle: {
            fontSize: 15,
            color: "#666",
          },
          left: 25,
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.rankData.map((item) => item.name),
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "点击次数",
            type: "bar",
            stack: "vistors",
            barWidth: "30%",
            data: this.rankData.map((item) => item.num),
          },
        ],
      };
      this.chartInstance1.setOption(initOption);
    },
    // 获取服务器的数据
    getData() {
      //排行榜数据
      homeview
        .getModuleNum()
        .then((res) => {
          // console.log(res)

          //数据处理
          const size = res.data.result.names.length;
          for (let i = 0; i < size; i++) {
            let temp = {};
            temp.name = res.data.result.names[i];
            temp.num = res.data.result.nums[i];
            this.rankData.push(temp);
          }

          // 对数据排序(从大到小)
          this.rankData.sort(function (a, b) {
            return b.num - a.num;
          });

          //为对象添加排行序号
          for (let i = 0; i < size; i++) {
            this.rankData[i].no = i + 1;
          }

          // console.log(this.rankData);
          this.updateChart1();
        })
        .catch((error) => {
          console.log("error");
        });

      //每月订单量数据
      homeview
        .getMonthlyOrder(this.year)
        .then((res) => {
          // console.log(res);
          this.xData = res.data.list.date;
          this.yData = res.data.list.num;
          this.updateChart();
        })
        .catch((error) => {
          console.log("error");
        });
    },
    // 更新图表
    updateChart() {
      const dataOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 70,
          left: 60,
          right: 60,
          bottom: 20,
        },
        xAxis: [
          {
            type: "category",
            data: this.rankData.map((item) => item.name),
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "点击次数",
            type: "bar",
            stack: "vistors",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: "rgb(46,199,201)", 
              },
            },
            data: this.rankData.map((item) => item.num),
          },
        ],
      };
      this.chartInstance1.setOption(dataOption);
    },
    updateChart1() {},
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      this.chartInstance.resize();
      this.chartInstance1.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.right {
  flex: 1;
}
.left {
  width: 50%;
  margin-right: 20px;
}
.module-view {
  margin-top: 20px;
  display: flex;
  .module-view-rank-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    height: 270px;
    .module-view-list {
      flex: 1;
      width: 100%;
      height: 100%;
      margin-top: 10px;
      margin-left: 30px;
      overflow: hidden;
      .module-view-title {
        margin-top: 15px;
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
      .list-item-wrapper {
        margin-top: 15px;
        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 15px;
          height: 20px;
          padding: 30px 20px 6px 0;
          .list-info {
            display: flex;
            align-items: center;
          }
          .list-item-no {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            color: #333;
            &.top-no {
              background-color: #000;
              border-radius: 50%;
              color: #fff;
              font-weight: 500;
            }
          }
          .list-item-name {
            margin-left: 10px;
            color: #333;
          }
          .list-item-num {
            flex: 1;
            // text-align: right;
            margin-left: 80px;
          }
        }
      }
    }
  }
}
</style>
